{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% extends "careers/base.html" %}

{% block page_title %}Mozilla Careers — All open positions at Mozilla{% endblock %}
{% block page_desc %}We have a mighty mandate, serving hundreds of millions of people. Add a culture of exploration, and there is always a new way to learn and grow here.{% endblock %}

{% block body_class %}listings-page{% endblock %}

{% block careers_content %}
<header class="c-careers-text-hero">
  <div class="mzp-l-content mzp-t-content-md c-text-hero-wrapper">
    <h1 class="c-text-hero-title">Feel good about your work again</h1>
    <div class="c-text-hero-body">
      <p>Bring your drive, your creativity, your big ideas and your new perspectives to make the difference we’re aiming for.</p>
    </div>
  </div>
</header>

<section class="mzp-l-content mzp-t-content-xl">
  <h2 class="c-careers-section-title">Listings</h2>

  <form id="listings-filters" class="hide-from-legacy-ie">
    <div class="listings-filter listings-filter-location">
      <label for="id_location" class="visually-hidden">Location</label>
      {{ form.location }}
    </div>

    {# hidden input keeps JS/python working, but removes the old form field #}
    <input type="hidden" id="id_position_type" name="position_type" value=""/>

    <div class="listings-filter listings-filter-name">
      <label for="id_team" class="visually-hidden">Team</label>
      {{ form.team }}
    </div>
  </form>

  <table class="listings-positions" id="listings-positions">
    <thead>
      <tr>
        <th class="title" scope="col"><h3>Job Title</h3></th>
        <th class="location" scope="col"><h3>Location</h3></th>
        <th class="name" scope="col"><h3>Team</h3></th>
      </tr>
    </thead>
    <tbody>
    {% for internal_job_id, postings in positions | groupby("internal_job_id") %}
      {#
        When the options list for the Django Form is built, we strip()
        whitespace from around each option. We need to do the same here
        to make sure the values can match, else we get filtering 'misses'.
      #}
      {% set position = postings | first %}
      <tr class="position"
          data-team="{{ position.department | trim }}"
          data-type="{{ position.position_type | trim }}"
          data-location="{{ postings | join(',', attribute='job_locations') }}">
        <td class="title"><a href="{{ position.get_absolute_url() }}">{{ position.title }}</a></td>
        <td class="location">{{ postings | join(', ', attribute='job_locations') }}</td>
        <td class="name">{{ position.department }}</td>
      </tr>
    {% endfor %}
      <tr class="empty-filter-message hidden" id="empty-filter-message">
        <td colspan="4">
          <p>No jobs found that match the selected filters.</p>
        </td>
      </tr>
    </tbody>
  </table>
    <p class="c-careers-button-wrapper"><a href="{{ url('careers.feed') }}">Subscribe to our open positions RSS feed</a></p>
</section>
{% endblock %}

{% block careers_bottom %}{% endblock %}

{% block js %}
  {{ js_bundle('careers-listings') }}
{% endblock %}
